<template>
  <view>
    <view class="tab flex flex-row justify-between items-center ">
      <view class="c_52 f_26 items flex justify-center items-center" @click="tab(index)" :class="active==index?'red':''"
        v-for="(item,index) in order" :key="index">
        {{item.text}}
      </view>
    </view>
    <view class="list">
      <view class="item flex flex-col" v-for="(item,index) in myluck" :key="index">
        <text class="f_30 c_52">{{item.prizeTitle}}</text>
        <text class="f_22 c_9 mt_10">截止时间：{{item.receiveEndTime}}</text>
        <view class="zt zt1" v-if="item.status==0"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          待兑奖
        </view>
        <view class="zt zt2" v-else-if="item.status==1"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          待核销
        </view>
        <view class="zt zt3" v-else-if="item.status==2"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          出奖中
        </view>
        <view class="zt zt4" v-else-if="item.status==3"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          已完成
        </view>
        <view class="zt zt5" v-else-if="item.status==4"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          已取消
        </view>
        <view class="zt zt6" v-else-if="item.status==5"
          @click="$util.Tips(`/subpageC/store_hexiao_detail/store_hexiao_detail?id=${item.activityId}&&yhuid=${item.uid}`)">
          已过期
        </view>
      </view>

    </view>
    <ListFooter :loadtitle="loadtitle"></ListFooter>
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import {
    recordListWriteOff,
    drawInfo,
  } from '@/api/activity.js';
  import ListFooter from '../../components/listFooter/listFooter.vue';
  export default {

    computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
    components: {
      ListFooter
    },
    data() {
      return {
        active: 0,
        myluck: [],
        page: 1,
        limit: 20,
        status: '',
        loadtitle: '加载更多',
        loading: false,
        loadend: false,
        order: [{
            text: '全部'
          },
          {
            text: '待兑奖'
          },
          {
            text: '待核销'
          },
          {
            text: '出奖中 '
          },
          {
            text: '已完成'
          },
        ]
      }
    },
    onShow() {
      this.getmyluck()
    },
    onReachBottom: function() {
      this.page++
      this.getmyluck();
    },
    onPullDownRefresh() {
      this.page = 1
      this.myluck = []
      this.loadend = false
      this.getmyluck();
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      tab(index) {
        this.active = index
        if (index == 0) {
          this.status = ''
        } else if (index == 1) {
          this.status = 0
        } else if (index == 2) {
          this.status = 1
        } else if (index == 3) {
          this.status = 2
        } else if (index == 4) {
          this.status = 3
        }
        this.page = 1
        this.getmyluck()
      },
      getname(id, pid) {
        drawInfo(id).then(res => {
          let index = res.data.prizes.findIndex(item => item.id === pid);
          console.log('名字' + res.data.prizes[index].title)
          return res.data.prizes[index].title


        })
      },
      getmyluck() {
        if (this.loading)
          return;
        if (this.loadend)
          return;
        this.loading = true;
        this.loadtitle = "";
        uni.showLoading({
          title: '加载中...'
        })
        let data = {
          limit: 20,
          page: this.page,
          status: this.status

        }

        recordListWriteOff(data).then(res => {
          uni.hideLoading()
          let list = res.data.list;
          let loadend = list.length < this.limit;
          this.myluck = this.myluck.concat(list)

          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"

        })



      },
    }
  }
</script>

<style lang="scss">
  .tab {
    height: 82rpx;
    padding: 20rpx 40rpx;
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;

  }

  .list {
    padding: 20rpx;
    margin-top: 82rpx;

    .item {
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin: 20rpx auto;
      position: relative;

      .zt {
        position: absolute;
        right: 20rpx;
        top: 30rpx;
        padding: 18rpx 20rpx
      }
    }
  }

  .zt1 {
    border-radius: 10rpx;
    border: 2rpx solid #FF9E45;
    background: #fff;
    color: #FF9E45;
    font-size: 28rpx;
  }

  .zt2 {
    border-radius: 10rpx;
    border: 2rpx solid #FF9E45;
    background: #fff;
    color: #FF9E45;
    font-size: 28rpx;
  }

  .zt3 {
    border-radius: 10rpx;
    border: 2rpx solid #DF4B43;
    background: #fff;
    color: #DF4B43;
    font-size: 28rpx;
  }

  .zt4 {
    border-radius: 10rpx;
    border: 2rpx solid #979797;
    background: #fff;
    color: #979797;
    font-size: 28rpx;
  }
</style>